<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas"></canvas>
</div>

<script>
    window.onload= function(){
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        canvas.width = 500;
        canvas.height = 500;
        canvas.style.border = "1px solid #000";
        cRect( 50, 50, 100, 50, 5 );
        cRect( 100, 120, 100, 80, 8, 'blue' );
        cRect( 300, 100, 200, 100, 10, 'green' );
        function cRect ( x, y, width, height, cornerRadius, color ) {
            ctx.save();
            ctx.beginPath();
            ctx.strokeStyle = color || 'red';

            ctx.moveTo( x + cornerRadius, y );
            ctx.lineTo( x + width - cornerRadius, y );

            ctx.moveTo( x + width, y + cornerRadius );
            ctx.lineTo( x + width, y + height - cornerRadius );

            ctx.moveTo( x + width - cornerRadius, y + height );
            ctx.lineTo( x + cornerRadius, y + height );

            ctx.moveTo( x, y + height - cornerRadius );
            ctx.lineTo( x, y + cornerRadius );


            // 开始绘制四个圆角
            ctx.moveTo( x + cornerRadius, y );
            ctx.arcTo( x, y, x, y + cornerRadius, cornerRadius );

            ctx.moveTo( x + width - cornerRadius, y );
            ctx.arcTo( x + width, y, x + width, y + cornerRadius, cornerRadius );

            ctx.moveTo( x + width, y + height - cornerRadius );
            ctx.arcTo( x + width, y + height, x + width - cornerRadius, y + height, cornerRadius );

            ctx.moveTo( x + cornerRadius, y + height );
            ctx.arcTo( x, y + height, x, y + height - cornerRadius, cornerRadius );

            ctx.stroke();
            ctx.restore();
        }
    }
</script>
</body>
</html>